<template>
 <div class="ordering">
     <div class="heading">学生视图</div>
     <div>
        <div class="MBTI-student">
             <el-input v-model="studentId" size="small" placeholder="输入学号" class="inptflex"/>
             <el-button type="primary" size="small" @click="select">查找</el-button>
             <!-- <el-button type="primary" size="small" @click="getinfo">cheshi</el-button> -->
        </div>
        <div class="cont">
             <div id="echart" :style="{ width: '400px', height: '400px',  }"></div>
        </div>
            
        
    </div>
 </div>

</template>

<script>
import * as echarts from "echarts";
import { ElMessage } from 'element-plus'
import { reactive ,toRefs,getCurrentInstance, ref, onMounted} from 'vue'
export default{
    setup(){
       
        const {proxy} = getCurrentInstance()

        const user = reactive({
            studentId: '',
         
        })

   

        const MBTI = reactive({
            ISTJ:0,
            ISFJ:0,
            INFJ:0,
            INTJ:0,
            ISTP:0,
            ISFP:0,
            INFP:0,
            INTP:0,
            ESTP:0,
            ESFP:0,
            ENFP:0,
            ENTP:0,
            ESTJ:0,
            ESFJ:0,
            ENFJ:0,
            ENTJ:0,
        })

       

      
        const studentdata = ref([{
                StudentID: '',
                StuidentName: '',
                time: '',
                MBTIcode: '',
    }])

        const select = async () => {

            const obj2 = {
                 StudentID: user.studentId,
            }

            try {
                
                const res_person = await new proxy.$request(proxy.$urls.m().person_result, obj2).modepost()
                
                if (res_person.status = 200) {
                    studentdata.value = res_person.data.StudentList
                    // console.log(studentdata)
                    // console.log(studentdata.value[0].MBTIcode)
                    // console.log(studentdata.value.length)
                } else {
                    ElMessage('请重新输入')
                }

                for(var i = 0; i < studentdata.value.length; i++){
                    if(studentdata.value[i].MBTIcode == 'INTJ'){
                        MBTI.INTJ++
                    }
                    if(studentdata.value[i].MBTIcode == 'ISFJ'){
                        MBTI.ISFJ++
                    }
                    if(studentdata.value[i].MBTIcode == 'INFJ'){
                        MBTI.INFJ++
                    }
                    if(studentdata.value[i].MBTIcode == 'INTJ'){
                        MBTI.INTJ++
                    }
                    if(studentdata.value[i].MBTIcode == 'ISTP'){
                        MBTI.ISTP++
                    }
                    if(studentdata.value[i].MBTIcode == 'ISFP'){
                        MBTI.ISFP++
                    }
                    if(studentdata.value[i].MBTIcode == 'INFP'){
                        MBTI.INFP++
                    }
                    if(studentdata.value[i].MBTIcode == 'INTP'){
                        MBTI.INTP++
                    }
                    if(studentdata.value[i].MBTIcode == 'ESTP'){
                        MBTI.ESTP++
                    }
                    if(studentdata.value[i].MBTIcode == 'ESFP'){
                        MBTI.ESFP++
                    }
                    if(studentdata.value[i].MBTIcode == 'ENFP'){
                        MBTI.ENFP++
                    }
                    if(studentdata.value[i].MBTIcode == 'ENTP'){
                        MBTI.ENTP++
                    }
                    if(studentdata.value[i].MBTIcode == 'ESTJ'){
                        MBTI.ESTJ++
                    }
                    if(studentdata.value[i].MBTIcode == 'ESFJ'){
                        MBTI.ESFJ++
                    }
                    if(studentdata.value[i].MBTIcode == 'ENFJ'){
                        MBTI.ENFJ++
                    }
                    if(studentdata.value[i].MBTIcode == 'ENTJ'){
                        MBTI.ENTJ++
                    } 
                }
                // console.log(MBTI)
                // console.log(MBTI)
                // console.log( MBTI.INTJ)
                getinfo()

            } catch (e) {
                // new proxy.$tips('服务器错误').message()
            }

        }
        
        console.log(MBTI)

        function getinfo() {
            let myChart = echarts.init(document.getElementById("echart"));
            // 绘制图表
            myChart.setOption({
                title: { text: "各测试结果占比" },
                series: [
                    {
                        type: 'pie',
                        data: [
                            {
                                value: MBTI.ENFJ,
                                name: 'ENFJ'
                            },
                            {
                                value: MBTI.ENFP,
                                name: 'ENFP'
                            },
                            {
                                value: MBTI.ENTJ,
                                name: 'ENTJ'
                            },
                            {
                                value: MBTI.ENTP,
                                name: 'ENTP'
                            },
                            {
                                value: MBTI.ESFJ,
                                name: 'ESFJ'
                            },
                            {
                                value: MBTI.ESFP,
                                name: 'ESFP'
                            },
                            {
                                value: MBTI.ESTJ,
                                name: 'ESTJ'
                            },
                            {
                                value: MBTI.ESTP,
                                name: 'ESTP'
                            },
                            {
                                value: MBTI.INFJ,
                                name: 'INFJ'
                            },
                            {
                                value: MBTI.INFP,
                                name: 'INFP'
                            },
                            {
                                value: MBTI.INTJ,
                                name: 'INTJ'
                            },
                            {
                                value: MBTI.INTP,
                                name: 'INTP'
                            },
                            {
                                value: MBTI.ISFJ,
                                name: 'ISFJ'
                            },
                            {
                                value: MBTI.ISFP,
                                name: 'ISFP'
                            },
                            {
                                value: MBTI.ISTJ,
                                name: 'ISTJ'
                            },
                            {
                                value: MBTI.ISTP,
                                name: 'ISTP'
                            }
                        ],
                        roseType: 'area'
                    }
                ]
            });
            window.onresize = function () {//自适应大小
                myChart.resize();
            };
        }


        return{studentdata, ...toRefs(user),select,proxy,...toRefs(MBTI),getinfo}}
}


</script>



<style>
.MBTI-student{
    width: 400px;
    margin: 0 auto 10 auto;
    padding-top: 10px;
    height: 0px;
    display: flex;
    align-items: center;
}

.cont{
    padding: 10%;
    
}


</style>






